<template>
  <div>
    <el-card style="width:100%">
      <p>仓库管理</p>
      <div class="searchArea flex">
        <el-form
          ref="serachForm"
          :model="searchForm"
          :inline="true"
          style="width:98%"
          label-position="left"
          label-width="90px"
        >
          <el-form-item label="选择仓储区" prop="expressNum">
            <el-select v-model="searchForm.expressNum" placeholder="请选择仓储区">
              <el-option label="上海临港自贸区" value="上海临港自贸区"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择仓储位" prop="orderNum">
            <el-select v-model="searchForm.orderNum" placeholder="选择仓储位">
              <el-option label="A位" value="A位"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="制造商料号" prop="productCode">
            <el-input v-model="searchForm.productCode" placeholder="请输入制造商料号"></el-input>
          </el-form-item>
          <el-form-item label="制造商">
            <el-select v-model="searchForm.mValue" filterable clearable
                       placeholder="请选择">
              <el-option v-for="item in searchForm.AllSlist"
                         :key='item.id'
                         :label="item.menuName"
                         :value="item.menuName"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="action">
            <el-button type='primary' @click="getOrderList">搜索</el-button>
          </el-form-item>
          <el-form-item prop="action">
            <el-button type='primary' @click="downloadDialog">导出</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="tableBox">
        <el-table
          :data="tableData"
          style="width: 100%"
          height="500"
        >
          <!--<el-table-column type="selection" width="50" align="center"></el-table-column>-->
          <el-table-column prop="image" label="样品图片" align="center">
            <template slot-scope="scope">
              <img :src="scope.row.image" min-width="70" height="70" />
            </template>
          </el-table-column>
          <el-table-column prop="productCode" label="制造商料号" align="center"></el-table-column>
          <el-table-column prop="menuName" label="制造商" align="center"></el-table-column>
          <el-table-column prop="" label="仓储区" align="center">上海临港自贸区</el-table-column>
          <el-table-column prop="" label="仓储位" align="center">A位</el-table-column>
          <el-table-column prop="" label="储位" align="center">A储</el-table-column>
          <el-table-column prop="stock" label="库存" align="center"></el-table-column>
          <!-- <el-table-column prop="price" label="规格描述" align="center"></el-table-column> -->
          <el-table-column label="操作" align="center" fixed="right" width="100">
	        <template slot-scope="scope">
	            <div>
	              <!-- <el-button type="primary" @click="outstore(scope.row,scope.$index)">出库</el-button> -->
	              <el-button type="primary" @click="enter(scope.row,scope.$index)">入库</el-button>
	            </div>
	        </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="text-align:center;margin-top:20px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
      <el-dialog title="入库信息" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="制造商料号" :label-width="formLabelWidth">
            <el-input v-model="form.productCode" disabled autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="补料单号" :label-width="formLabelWidth">
            <el-select v-model="makeupOrderNum" placeholder="请选择"  clearable @change="setMakeupOrderNum">
                  <el-option
                    v-for="item in searchMakeOrderNum"
                    :label="item.orderNum"
                    :value="item.orderNum"
                    :key="item.orderNum"
                  ></el-option>
                </el-select>
          </el-form-item>
          <el-form-item label="最大数量" :label-width="formLabelWidth">
            <el-input v-model="form.maxStock" disabled></el-input>
          </el-form-item>
          <el-form-item label="入库数量" :label-width="formLabelWidth">
            <el-input v-model="form.num" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="备注" :label-width="formLabelWidth">
            <el-input v-model="form.memo" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="inoutstore">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 导出 -->
    <el-dialog title="导出" :visible.sync="dialogDetailFormVisible">
      <el-form :model="downLoadForm">
        <el-form-item label="制造商料号">
            <el-input v-model="downLoadForm.productCode" autocomplete="off"></el-input>
          </el-form-item>
        <el-form-item label="供应商">
          <el-select v-model="downloadMenu" placeholder="请选择">
            <el-option
              v-for="item in downLoadForm.AllSlist"
              :key="item.id"
              :label="item.menuName"
              :value="item.menuName"
            ></el-option>
          </el-select>
        </el-form-item>
         <el-form-item label="创建时间"
                        prop="timeRange">
            <el-date-picker v-model="downLoadForm.timeRange"
                            clearable
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"></el-date-picker>
          </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogDetailFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="downLoadExcel">确 定</el-button>
      </div>
    </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { LIAOHAO_LIAOHAOLIST, LIAOHAO_INOUTSTORE ,MAKEUP_DOWNLOAD,PRODUCT_LIST,IN_OUT_STORE,PRODUCT_DOWNLOAD,
        PRODUCT_MAKEUP_LIST,SUPPLIER_ALLLIST} from "@/utils/api";
export default {
  data() {
    return {
      dialogDetailFormVisible:false,
      downloadMenu:'',
      downLoadForm: {
        timeRange:[],
        AllSlist: [
          { id: 1, menuName: "傲然" },
          { id: 2, menuName: "咩咩" },
          { id: 3, menuName: "mc" },
          { id: 4, menuName: "lulu" }
        ],
        productCode: "",
      },
      searchMakeOrderNum:[{orderNum:''}],
      makeupOrderNum:'',
      menuId:null,
      dialogFormVisible: false,
      form: {
        maxStock:0,
        name: '',
        region: '',
        memo: '',
      },
      formLabelWidth: '120px',
      searchForm: {
        AllSlist:[],
        expressNum: '',
        productCode: '',
        orderNum: '',
        productMenu:''
      },
      downloadUrl: "http://oss.dataos.top/",
      productCode:"",
      id:0,
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      id: 0,
      liaohaoId: "",
      type: "",
	    num: ""
    };
  },
  mounted() {
       this.getProductList();
       this.getAllList()
  },
  methods: {
    setMakeupOrderNum(row){
      var ma
       console.log('----->'+row)
      for(ma of this.searchMakeOrderNum){
        console.log('----->'+ma.stock)
        if(ma.orderNum==row){
          console.log('---++++++++-->'+ma.stock)
          this.form.maxStock=ma.stock
        }
      }
    },
    downLoadExcel(){
      PRODUCT_DOWNLOAD({
        menuName:this.downLoadForm.menuName,
        productNumber:this.downLoadForm.productCode,
        startTime:new Date(this.downLoadForm.timeRange[0]).getTime()/1000,
        endTime:new Date(this.downLoadForm.timeRange[1]).getTime()/1000
      }).then(res => {
        console.log(res.data);
        var url = that.downloadUrl + res.data;
        location.href = url;
        this.dialogDetailFormVisible=false
      });
    },
    getAllList() {
      SUPPLIER_ALLLIST({}).then(res => {
        this.downLoadForm.AllSlist = res.data;
        this.searchForm.AllSlist=res.data
        console.log(this.AllSlist);
      });
    },
    downloadDialog(){
      this.getAllList()
      this.dialogDetailFormVisible=true
    },
    getProductList() {
      PRODUCT_LIST({
        pageNo: this.currentPage,
        pageSize: this.pageSize
      }).then(res => {
        this.tableData = res.data.dataList;
        this.total = res.data.count;
        if(this.total>0){
          this.id=this.tableData[0].productId
          console.log('++++>'+this.id)
          this.productCode=this.tableData[0].productCode
          console.log('+++productCode+>'+this.productCode)
        }else{
          this.$message.error('无此数据')
        }
      });
    },
    getMakeUpList(){
      PRODUCT_MAKEUP_LIST({
        productCode:this.form.productCode,
        status:1,
        inStore:0,
        pageFlag:0,
      }).then(res=>{
          this.searchMakeOrderNum=res.data.dataList
      })
    },
    getOrderList(){
      PRODUCT_LIST({
        productCode: this.searchForm.productCode,
        menuName:this.searchForm.mValue,
        pageNo: this.currentPage,
        pageSize: this.pageSize
      }).then(res => {
        this.tableData = res.data.dataList;
        this.total = res.data.count;
        if(this.total>0){
          this.id=this.tableData[0].productId
          console.log('++++>'+this.id)
          this.productCode=this.tableData[0].productCode
          console.log('+++productCode+>'+this.productCode)
        }else{
          this.$message.error('无此数据')
        }
      });
    },
    inoutstore(){
      var t=1
      var mm
      var productId=0
      var id=0
      for(mm of this.searchMakeOrderNum){
        if(mm.orderNum==this.makeupOrderNum){
          productId=mm.productId
          id=mm.id
        }
      }
    	IN_OUT_STORE({
          productId: productId,
          makeupId:id,
	        type: t,
	        num: this.form.num
	    }).then(res => {
	    	if(t == 1){
		      this.$message({
		        type: 'success',
		        message: '入库成功'
		      });
	    	}else{
		      this.$message({
		        type: 'success',
		        message: '出库成功'
		      });
	    	}
    		this.getOrderList()
	    }).catch(() => {    
        })
        this.dialogFormVisible=false
    },
    outstore(row,index) {
      	this.$prompt('请输入出库数量', '出库', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
          this.inoutstore(row.id, 2, value)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        })
    },
    enter(row,index) {
        this.form=row
        console.log("this.form:"+JSON.stringify(row))
        this.dialogFormVisible=true
        this.getMakeUpList()
    },
    handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize=val
        this.getOrderList()
    },
    handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage=val
        this.getOrderList()
    }
  }
};
</script>

<style lang="scss" scoped>
p {
  font-size: 20px;
  padding: 10px 0;
}
.tableBox {
  width: 100%;
  background: #fff;
  padding: 10px 2px;
  border-radius: 5px;
  //   box-shadow: 2px 3px 15px 0 #ccc;
}
</style>